<template>
<div>
    <div class="topic">
        <div class="topic-left">
            <div class="btn btn-lg btn-default" @click="ReturnToShops" >返回</div>
            <div class="shop-name">{{ shop.name }}</div>
        </div>
        <div class="topic-right">
            <div>
                <span class="" >主机状态：</span> <span>{{ RefineProtectorStatus( protector ) }}</span> 
            </div>
            <div>
                <span class="" >主机类型: </span> <span>{{ protector.detail.type }}</span>
            </div>
        </div>
        <div style="clear:both">
        </div>
    </div>
    <div>
        <div class="content-left " >
            <h4 class="text-center">
                {{protector ? protector.ip: "waiting"}}
            </h4>
            <ul class="area-list-group">
                <li class="area-list-item " v-for="(area, k ) in protector.arm_areas"> 
                    <div v-if='showAreaToggle[k]' class="arm-area-panel" >
                        <div :class="{ [RefineStatusColor( k )]: true, 'arm-area-heading': true  }">
                            <span>{{ k }} 号防区</span> <img @click.stop.prevent="ToggleArea( $event, area, k )" :src='confirm_arm_area_png'/>
                        </div>
                        <div class="arm-area-body"  >
                              <label class="form-check-label">
                                  布防
                                <input class="form-check-input" type="radio"  value="b" v-model="area_op[k]">
                              </label>
                              <label class="form-check-label">
                                  撤防
                                <input class="form-check-input" type="radio" value="c" v-model="area_op[k]">
                              </label>
                        </div>
                    </div>
                    <div v-else class="arm-area-panel " >
                        <div class="arm-area-heading " :class="{ [RefineStatusColor( k )]: true  }">
                            <span>{{ k }} 号防区</span> <img @click.stop.prevent="ToggleArea( $event, area,  k )" :src='setting_arm_area_png'/>
                        </div>
                        <div class=" arm-area-body ">
                            {{ RefineArmAreaStatus( area )  }}
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="content-right " style="margin-top:20px;margin:auto;overflow:auto;width:fit-content" >
            <div v-for="layer, layer_idx  in shop.layers " class="layer-panel" style="margin:auto">
                <div class="layer-panel-heading" >
                    <h2> {{ layer.name }} </h2>
                </div>
                <div class="layer-panel-body " style="margin:auto;position:relative;width:fit-content" >
                    <img :src="layer.layout_pic_url"  style=""/>
                    <div style=";top:0px; left:0px; z-index:10; position:absolute">
                       <div v-for="a, area_idx in getArmAreasOf( layer_idx )"  class="anchor ":class="{ [RefineStatusColor(area_idx)]: true } " :style= "{ top:a.y+'px', left: a.x +'px'}" @click.prevent.stop="ShowArmArea( area_idx )">
                            <label  > {{ area_idx }} </label>
                       </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</template>
<script>
import axios from 'axios'

import confirm_arm_area_png from "./assets/confirm_arm_area.png"
import setting_arm_area_png from "./assets/setting_arm_area.png"
import bus from './bus'

export default { 
    name: 'security',
    props: ['shopid'],
    data(){ 
        return { 
            showAreaToggle: { },
            area_op: {},
        }
    },

    computed: {
        protector(){
            var shops = this.$store.state.shops;
            var protectors = this.$store.state.protectors;
            return protectors[ shops[this.shopid].mac ];
        },
        arm_areas(){
            return this.shop.arm_areas;
        },
        shop(){
            var shops = this.$store.state.shops;
            return shops[this.shopid]
        },
        confirm_arm_area_png (){ 
            return confirm_arm_area_png
        },
        setting_arm_area_png(){ 
            return setting_arm_area_png
        }
    },

    methods: {
        RefineStatusColor( k ){
            var arm_areas = this.protector.arm_areas;
            if( !arm_areas ){
                arm_areas = {};
            }
            var area = arm_areas[k]
            if( !area )
                return "unknown_color";
            var depth = 0
            if( area.t ) {
              depth = ( area.t - Date.now() )/( 3600 * 4 * 1000)

              if( depth > 2 )
                  depth = 2

              if( depth < 0 )
                  depth = 0
            }
            console.log( "depth: ", depth )

            if( area.a ){
                return "alarm_color";
            }
            else if( area.s =="b" ){
                return "bufang_color_" + depth ;
            }
            else if( area.s == 'c' ) {
                return "chefang_color_" + depth;
            }
            else {
                console.log( "unknow color")
                return "unknown_color"
            }
        },
        RefineArmAreaStatus( area ){
            console.log( "refineArmAreaStatus: ", area );
            console.log( "this.protect.stamp: ", this.protector.stamp );
            console.log( area.t )
            var stamp = this.protector.stamp;
            if( area.a ) {
                var pastTime = Math.round( ( Date.now() - stamp )/( 3600 * 1000 ) )
                return pastTime + "小时前报警"
            }
            else if( area.s == "b" ){ 
                var pastTime = Math.round( ( Date.now() - stamp )/( 3600 * 1000 ) )
                return "已经布防" + pastTime + "小时"
            }
            else if( area.s == 'c'&&  area.s == 'c'){
                var pastTime = Math.round( ( Date.now() - stamp )/( 3600 * 1000 ) )
                return "已经撤防" + pastTime + "小时"
            }
            else {
                console.log( "unknown area" , area  )
                if( area.t ){
                    var pastTime = Math.round( ( Date.now() - stamp )/( 3600 * 1000 ) )
                    return "设备未上报状态" + pastTime
                }
                else {
                    return "未检测到设备"
                }
            }
        },

        RefineProtectorStatus( protector ){
            for( let idx in protector.arm_areas ){ 
                if( protector.arm_areas[idx].a ) {
                    return this.RefineArmAreaStatus( protector.arm_areas[idx] );
                }
                else if( protector.arm_areas[idx].s == "b" ) {
                    return this.RefineArmAreaStatus( protector.arm_areas[idx] );
                }
            }
            return "撤防";
        },

        ShowArmArea( arm_area_idx  ){
            console.log( " popup arm area:  ", arm_area_idx );
            bus.$emit( "ShowArmArea", { shopid: this.shopid, arm_area_idx, stamp: 0 } );
        },

        getArmAreasOf( idx ){
            var ret_areas = {}
            console.log( "getArmAreasOf: ", this.shop.arm_areas );
            for( let num in this.shop.arm_areas ) {
                if( this.shop.arm_areas[num].l == idx ) {
                    ret_areas[num] = this.shop.arm_areas[num]
                }
            }
            console.log( "ret_areas: ", ret_areas );
            return ret_areas;
        },

        ReturnToShops(){ 
            this.$router.go(-1)
        },

        ToggleArea( event, area, op_idx ){
            this.$set( this.showAreaToggle, op_idx, !this.showAreaToggle[op_idx] )
            if( !this.showAreaToggle[op_idx] ){

                event.currentTarget.src = confirm_arm_area_png

                console.log( "ready to set ", op_idx , " with ", this.area_op[op_idx ])

                if( !this.protector.arm_areas[op_idx]){
                    console.log( "arm_area ", op_idx, " is empty")
                    return;
                }

                if( this.area_op[op_idx] != this.protector.arm_areas[op_idx].s ) { 
                    var pending_arm_areas = {};
                    for( let idx in this.protector.arm_areas ){
                        if( !this.protector.arm_areas[idx].s || this.protector.arm_areas[idx].s == 'c')
                            pending_arm_areas[idx] = false;
                        else 
                            pending_arm_areas[idx] = true;
                    }
                    if( this.area_op[op_idx] =="c" ){
                        pending_arm_areas[op_idx] = false;
                    }
                    else if( this.area_op[op_idx] == "b" ) {
                        pending_arm_areas[op_idx] = true;
                    }

                    console.log( "setProtector: ", pending_arm_areas);
                    this.$store.commit( "setProtector", { mac: this.protector.mac,  arm_areas: pending_arm_areas } );
                }
            }
            else {
                event.currentTarget.src = setting_arm_area_png
            }
        },
    }
}
</script>
<style scoped>

@keyframes alarm{ 
from { background-color: red }
to { background-color: white}
}
.alarm_color{ 
    animation: 1.5s alarm infinite;
}
.unknown_color{
    background-color:  black;
    color: white;
}
.bufang_color_0{
    background-color: #95C9FA
}

.bufang_color_1{
    background-color: #3189D6,
}

.bufang_color_2{
    background-color: #00498D
}

.chefang_color_0{
    background-color: #FFDCB4
}

.chefang_color_1 {
    background-color: #FF9335;
}

.chefang_color_2 {
    background-color: #FF572B;
}
.topic{
    margin:0px;
    width: 100%;
    height:100px;
    padding-top:19px;
    padding-bottom: 19px;
}
.topic-left{
    margin-right:0px;
    float: left;
    line-height: 100%;
}
.topic-left > div{
    display:inline-block;
    margin: 0 20px;
    line-height: 100%;
}
.topic-left .shop-name{ 
    font-size: 30px;
}
.topic-right{
    height:100%;
    float: right;
    font-size: 30px;
    line-height: 100%;
}
.topic-right >div{ 
    display: inline-block;
}

#security{ 
    position: relative;
    min-height: 800px;
}

.content-left{
    float:left;
    min-height: 600px;
    width: 400px;
}

.layer-panel{
    margin:auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.layer-panel-heading{
    text-align: center;

}
.layer-panel-body{
}

h1 { 
  width: 100%;
  font-size:1em;
  text-align: center;
}
a {
  color: #42b983;
}
.anchor{ 
    position: absolute;
    font-weight: bold;
    font-size:20px;
    width: 32px;
    height: 32px;

    text-align: center;
    white-space: nowrap;
    vertical-align: middle;

    border-radius: 16px;
    border: 2x #0cb solid;
}
.area-list-group{
    margin: 20px;
}
.area-list-item{
    padding: 20px;
    display:block;
}
.arm-area-panel{
    display: block;
    width: 100%;
    height: 100px;
    margin:20px;
}
.arm-area-body{
    padding: 20px;
    background-color: #eee;
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 100%;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.arm-area-heading {
    display:flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    width: 100%;
    height: 4em;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
}

.arm-area-heading:before{
    content: "";
    display:inline-block;
    height:100%;
    vertical-align:middle;
}
</style>
